<html>
	<head>
		<meta charset=utf-8>
		<title>My first three.js app</title>
		<style>
			* { margin: 0; padding: 0}
		</style>
	</head>
	<body>
            <script src="../js/three.js"></script>
		<script>
            /*
            *创建场景对象
            */ 
            let scene = new THREE.Scene();
            
            /*
            *创建线条对象
            */ 
            let geometry = new THREE.Geometry(); // 声明一个空几何体对象
            let p1 = new THREE.Vector3(0, 0, 0); // 顶点1坐标
            let p2 = new THREE.Vector3(80, 0, 0); // 顶点2坐标
            let p3 = new THREE.Vector3(80, 80, 0); // 顶点3坐标
            let p4 = new THREE.Vector3(0, 80, 0); // 顶点3坐标
            geometry.vertices.push(p1, p2, p3, p4); // 顶点坐标添加到geometry对象中
            let normal = new THREE.Vector3(0, 0, 1); // 三角面法向量
            let face0 = new THREE.Face3(0, 1, 2, normal); // 创建三角面0
            let face1 = new THREE.Face3(0, 2, 3, normal); // 创建三角面1
            geometry.faces.push( face0, face1 ); // 三角面添加到几何体

            let material = new THREE.MeshLambertMaterial({
                color: 0x0000ff, // 三角面颜色
                side: THREE.DoubleSide//两面可见
            }); // 材质对象  
            
            let mesh=new THREE.Mesh(geometry, material);//网格模型对象
            scene.add(mesh);//网格模型添加到场景中


            /*
             *相机设置 
            */
            let width = window.innerWidth;
            let height = window.innerHeight;
            let k = 1; // 窗口宽高比
            let s = 200; // 三维场景缩放系数
            let camera = new THREE.OrthographicCamera (-s*k,s*k, s,-s,1,1000);
            camera.position.set(0, 0, 100); // 设置相机位置
            camera.lookAt(scene.position); // 设置相机方向（指向的场景对象）

            /*
            * 创建渲染器对象
            */
            let renderer = new THREE.WebGLRenderer();
            renderer.setSize(width, height);
            renderer.setClearColor(0xb9d3ff,1);//设置背景颜色
            document.body.appendChild( renderer.domElement );// body元素中插入canvas对象
            renderer.render(scene,camera);// 执行渲染操作
		</script>
	</body>
</html>